import { Component } from 'react'
import { Button } from 'antd'
import store from '@/store'
import { IState } from '@/store/reducer/news'
import { GET_NEWS } from '@/store/actionType'
import { getNewsList } from '@/api'

interface IProps {}

export default class News extends Component<IProps, IState> {
	constructor(props: IProps) {
		super(props)
		this.state = { news: [] }
	}

	componentDidMount() {
		this.getSelfNewsList()
	}

	getSelfNewsList = async () => {
		const news = await getNewsList()
		this.setState({ news })
	}

	getStoreNewsList = () => {
		const { news: { news } } = store.getState()
		this.setState({ news })
	}

	updateStoreNewsList = async () => {
		const { news } = this.state
		store.dispatch({ type: GET_NEWS, news })
	}

	render() {
		return (
			<div>
				<Button onClick={() => this.getSelfNewsList()}>
					更新组件内news
				</Button>
				&nbsp;
				<Button onClick={() => this.getStoreNewsList()}>
					获取store中news
				</Button>
				&nbsp;
				<Button onClick={() => this.updateStoreNewsList()}>
					同步到store中news
				</Button>
				{this.state.news.map((o, i) => (
					<div key={i}>
						<span>{o.name}</span>
						<span>{o.id}</span>
					</div>
				))}
			</div>
		)
	}
}
